<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <!-- Bootstrap -->
    	<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
    	<link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" media="screen">
    	<link rel="stylesheet" type="text/css" href="../css/index.css" />
    	<link rel="stylesheet" type="text/css" href="../css/style.css" />
        <title>Hello World</title>
    </head>
    <body>
    	<div id="header">
		  <div>
	              <a class="dropdown-toggle" id="header-titre" role="button" data-toggle="dropdown" href="#"><img src="../img/logo3_small.png"></a>
		  </div>
		  
		  <div id="header-right">
		  	<div class="popover top" id="notification">
		  		<div class="arrow" style="border-top-color:#E8373E"></div>
		  		<div class="popover-content" style="font-weight: bold; color:white; font-size: 1.5em;">6</div>
		  	</div>
		  </div>
        </div>
        
        <div id="container-add">
            <div><input type="text" name="titre" id="titreInput" placeholder="Quel est ce produit? " /></div>
            <div><input type="text" name="prix" id="prixInput" placeholder="Quel prix ? " /></div>
            <div id="photo">
	            <div id="ajouterPhoto">	
	            	<span style="font-size: 2em; font-weight: bold;">Ajouter une photo</span>
	            	<div class="row-fluid" style="font-size: 1.5em;margin-top: 2em;">
	            		<div class="span6" id="capture"><i class="icon-camera icon-3x"></i><br> Capturer</div>
	            		<div class="span6" id="photoLibrary"><i class="icon-folder-open icon-3x"></i><br> Album</div>
	            	</div>
            	</div>
            	<div id="affichePhoto"></div>
            </div>
            <button class='btn' id='supprimerPhoto' style="display:none;margin-top: 1em;height: 3em; font-size:2em; width:80%">Supprimer la photo</button>
            <div style="font-size: 1.5em; margin: 1.5em 0 1.5em;">
            <label style="font-size: 140%;">Je vend ce produit <input type="checkbox" class="ios-switch" style="width:10%" /></label>
            </div>
        </div>
        
        <div id="footer">
            <div class="row-fluid" style="text-align:center;">
                <div><button type="submit" class="btn submitBtn" id="envoyer">Envoyer</button></div> 
            </div>
        </div>
        
        <script type="text/javascript" src="../js/cordova-2.6.0.js"></script>
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/bootstrap-dropdown.js"></script>
        <script type="text/javascript" src="../js/model.js"></script>
         <script type="text/javascript">
			// JS is only used to add the <div>s
			var switches = document.querySelectorAll('input[type="checkbox"].ios-switch');
			var pictureSource;   // picture source
		    var destinationType; // sets the format of returned value 
		    var imageUpload;
		    var user;
		    
			for (var i=0, sw; sw = switches[i++]; ) {
				var div = document.createElement('div');
				div.className = 'switch';
				sw.parentNode.insertBefore(div, sw.nextSibling);
			}
			
			$("#capture").click(function(){
				 capturePhoto(); 
			});
			$("#photoLibrary").click(function(){
				getPhoto(pictureSource.PHOTOLIBRARY);
			});
			
			$("#supprimerPhoto").click(function(){
				navigator.camera.cleanup(onSuccess, onFail); 
				$("#ajouterPhoto").show();
				$("#affichePhoto").hide();
				$("#affichePhoto").html('');
				$(this).hide();
			});
			
			$("#envoyer").click(function(){
				// Instanciation de l'objet
				var product = new Product();
				product.owner = false;
				product.title = $("#titreInput").val();
				product.price = $("#prixInput").val();
				product.currency = user.currency;
				product.by = "mois";
				product.adress = user.adress;
				product.description = "Description";
				product.photo = "photo";
				product.category = new Category(1);
				product.user = new User(user.id);

				// Envoie du JSON au serveur
				$.post("http://pricy.me/web/app.php/api/product/new?json="+product.getJSON(), { "json": "test"})
				.done(function(data) {

				  // On récupère le résultat
				  alert("Data Loaded: " + data);
				  uploadPhoto(data); 
				})
				.fail(function(data) { alert("error : "+ JSON.stringify(data)); })
				.always(function() { alert("finished"); });
				
			});
			

		    // Wait for Cordova to connect with the device
		    //
		    document.addEventListener("deviceready",onDeviceReady,false);

		    // Cordova is ready to be used!
		    //
		    function onDeviceReady() {
		        pictureSource=navigator.camera.PictureSourceType;
		        destinationType=navigator.camera.DestinationType;
		        navigator.camera.cleanup(onSuccess, onFail); 
		        
		        user = new User();
		        readFromFile("user.txt");
		    }
		    
		    function readFromFile(file) {
                window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, 
                function(fileSystem) {
                    fileSystem.root.getFile(file, null,
                    function(fileEntry) {
                        fileEntry.file(
                        function(file){
                            var reader = new FileReader();
                            reader.onloadend = function(evt) {
                            	userData = evt.target.result;
    		                	user = JSON.parse(userData);
                            };
                            reader.readAsText(file);
                        }
                        , onFail);
                    }
                    , onFail);
                }
                , onFail);
            }
		    
		    function onSuccess() {
	            alert("Camera cleanup success.");
	        }

		    function capturePhoto() {
		        // Take picture using device camera 
		        navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
		          destinationType: destinationType.FILE_URI });
		      }
		    function getPhoto(source) {
		        // Retrieve image file location from specified source
		        navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
		          destinationType: destinationType.FILE_URI,
		          sourceType: source });
		      }
		    
		    function uploadPhoto(id) {
	            var options = new FileUploadOptions();
	            options.fileKey="file";
	            options.fileName=imageUpload.substr(imageUpload.lastIndexOf('/')+1);
	            options.mimeType="image/jpeg";
	            
	            options.chunkedMode = false;
	 
	            var ft = new FileTransfer();
	            ft.upload(imageUpload, "http://pricy.me/web/app_dev.php/api/product/upload?id="+id, onWin, onFail, options);
	        }
		    
		    //
		    function onPhotoURISuccess(imageURI) {
		    	$("#affichePhoto").show();
		     	$("#affichePhoto").html("<img src='"+imageURI+"' style='width:100%' />");
		    	$("#ajouterPhoto").hide();
		    	$("#supprimerPhoto").show();
		    	
		    	imageUpload = imageURI;
		    }
		    
		    function onFail(message) {
		      }
		    function onWin(message) {
		      }
		</script>
    </body>
</html>
